<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>html页面</title>

        <script src="js/fruits-service.js" type="text/javascript"></script>
        <script src="js/calculator-service.js" type="text/javascript"></script>
        <script src="js/eat-service.js" type="text/javascript"></script>

        <link rel="stylesheet" href="css/bootstrap.min.css">

        <link rel="stylesheet" href="css/bootstrap-theme.min.css">

        <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="app">
    <h1>桌面应用</h1>
    <p>使用 javafx WebView組件
        技术:(javascript和java之间的交互)
        Bootstrap (布局).</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">计算器(异步)</h3>
                    </div>
                    <div class="panel-body">

                        Number1: <input v-model="number1"  @change="computer" class="form-control"><br>
                        Number2: <input v-model="number2" @change="computer"  class="form-control"><br>

                        <p>数字1 + 数量2 等于: {{sum}}<br>
                            <small>(这个结果是通过java异步返回的)</small>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">加载水果列表</h3>
                    </div>
                    <div class="panel-body">
                        水果:
                        <small>(数据从java代码中异步加载)</small>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Name</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr >
                                <td v-for="hero in heros">{{hero}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <button class="btn btn-lg btn-success"  click="update">加载java数据</button>
                        <button class="btn btn-lg btn-success" onclick="eat()">调用java</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <a href="index.html">刷新页面</a>
    <!-- 先引入 Vue -->
</div>
</body>
<script src="jslib/vue.min.js"></script>
<!-- 先引入 Vue -->
<script>
    var v = new Vue({
        el: "#app",
        data: {
            heros : ['aa','水果'],
            msg: 'aaaa',
            number1: 0,
            number2: 0,
            sum: 0,
            fruit : ''
        },
        mounted : function(){
            var that = this;
            fruitsService.loadHero(function(data){
                that.heros = data;
            });

        },
        methods: {
            computer: function () {
                this.sum = calculatorService.sum(this.number1, this.number2);
            }
        }
    });

    function eat() {
        var a = eatService.eat('屎');
    }
</script>
</html>